<template>
  <div id="tabbar">
    <div class="placegolder-container">
      <!-- 底部导航栏 -->
      <div class="bottom-tabs">
        <div
          class="tabs-item"
          v-for="(item, index) in tabsList"
          :key="index"
          @click="tabsChange(index)"
        >
          <img
            class="tab-icon"
            :src="tabIndex == index ? item.src : item.src1"
          />
          <p class="tab-text" :class="tabIndex == index ? 'active' : ''">
            {{ item.text }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tabbar",
  components: {},
  data() {
    return {
      tabIndex: 0,
      tabsList: [
        {
          src: require("../assets/icon/sc.png"),
          src1: require("../assets/icon/sc1.png"),
          text: "首页",
          path: "/",
        },
        {
          src: require("../assets/icon/type.png"),
          src1: require("../assets/icon/type1.png"),
          text: "分类",
          path: "/booktype",
        },
        {
          src: require("../assets/icon/shujia.png"),
          src1: require("../assets/icon/shujia1.png"),
          text: "书架",
          path: "/bookrack",
        },

        {
          src: require("../assets/icon/my.png"),
          src1: require("../assets/icon/my1.png"),
          text: "我的",
          path: "/person",
        },
      ],
    };
  },
  created() {
    this.tabIndex = localStorage.getItem("tabIndex");
    console.log(this.tabIndex);
  },
  methods: {
    tabsChange(index) {
      this.tabIndex = index;
      localStorage.setItem("tabIndex", this.tabIndex);
      this.$router.push({
        path: this.tabsList[index].path,
      });
      
    },
  },
  watch: {
    $route(newVal, oldVal) {
      console.log("newval"+newVal, oldVal);
      if (newVal.meta.index >= 0) {
        this.tabIndex = newVal.meta.index;
        localStorage.setItem("tabIndex", this.tabIndex);
      }
    },
  },
};
</script>

<style  >
#tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
}
.placegolder-container {
  height: 70px;
}

.bottom-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0px -1px 1px #e6e6e6;
  background-color: #fff;
}
.tabs-item {
  padding: 5px 0;
  flex: 1;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.tab-text {
  font-size: 10px;
  margin: 0;
}
.tab-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}
</style>